<template>
  <el-container style="position:absolute;right:15%;left:15%;width: 70%;height: 100%;background-color:#ffffff;">
    <el-main style="padding:0px;padding-right:20px;marigin:auto;width:80%">
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="问题"
          name="first"
        >
          <div class="content">
            <el-table
              class="table table-hover"
              style="table-layout:fixed;text-align:left;cursor:pointer;"
              width="100%"
              @row-click="openDetails"
              :data="list"
            >
              <el-table-column
                label="题目简介"
                prop="title"
              ></el-table-column>
              <el-table-column
                label="作者"
                prop="username"
              ></el-table-column>
              <el-table-column
                label="访问量"
                prop="name"
              >10</el-table-column>
              <td style="text-align:right;color:#808080;font-size:10px">
                <i class="el-icon-view"></i>
                访问量：
              </td>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="limit"
        layout="prev, pager, next"
        :total="total"
        style="margin-top:30px;margin-left:180px"
      ></el-pagination>
    </el-main>
    <el-aside style="padding-left:5px;border-left: 1px solid #e1e2e5;">
      <Hotquestion style="padding:0px;"></Hotquestion>
    </el-aside>
  </el-container>
</template>

<script>
import Hotquestion from '../components/Hotquestion.vue'
export default {
  data() {
    return {
      keyword: "",
      activeName: "first",
      page: 1,
      data: [], //所有数据
      list: [], //每页动态数据
      total: null,
      limit: 8
    };
  },
  components: {
    Hotquestion,
  },
  mounted() { 
    this.keyword =  JSON.parse(this.$route.query.keyword) // 取
    this.$http.get("/api/search?keyWord=" + this.keyword).then(res=>{
      // console.log(res);
      this.data=res.data.searches;
      this.getlist();
    })
  },
  methods: {
    // pagelist() {
    //   this.getlist();
    // },
    getlist() {
      this.list = this.data.filter(
        (item, index) =>
          index < this.page * this.limit &&
          index >= this.limit * (this.page - 1)
      );
      this.total = this.data.length;
      // console.log(this.page * this.limit);
      // console.log(this.list)
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getlist();
    },
    openDetails(row) {
      // console.log(row)
      this.$router.push({
          name: 'answersheet',//页面名字
          path:"/answersheet",//页面路劲 和上面名字任意一个都可以
          query: {id: JSON.stringify(row.tid)} // 参数传值
        })
    }
  }
};
</script>

<style>
.content {
  margin-top: 10px;
  width: 700px;
  border-top: 5px lightblue solid;
  height: 450px;
}
.content2 {
  margin-top: 10px;
  width: 700px;
  border-top: 5px rgb(161, 233, 197) solid;
}
.el-tabs__item {
  font-size: 20px;
}
td {
  width: 80%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style> 